import {
  getHospitalDepartmentRequest,
  getHospitalScheduleAndDetailRequest,
  getHospitalScheduleRuleRequest,
} from "@/api/hospital/hospitalList";
import {
  getHospitalDepartmentListType,
  getHospitalBookingScheduleListType,
  getHospitalScheduleAndDetailListType,
} from "@/api/hospital/model/hospitalListType";
import { Card, Col, Row, Tree, Tag, Pagination, Table, Button } from "antd";
import React, { Key, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import style from "./index.module.css";

export default function HospitalSchedule() {
  const navigator = useNavigate()
  //获取点击跳转的传参
  const { hoscode } = useParams();
  // console.log(hoscode);

  //设置科室的state
  const [hosDepart, sethosDepart] = useState<getHospitalDepartmentListType>([]);

  //定义当前选中的depcode
  const [depCode, setDepCode] = useState("200040878");

  //设置请求的科室排班规则的数据
  const [scheduleRule, setScheduleRule] =
    useState<getHospitalBookingScheduleListType>([]);

  //设置当前页
  const [page, setPage] = useState(1);

  //设置每页显示多少条
  const [limit, setLimit] = useState(5);

  //设置一共多少条
  const [total, setTotal] = useState(0);

  // 设置请求日期
  const [workDate, setWorkDate] = useState("2022-04-26");

  // 设置请求科室排班详情的数据
  const [scheduleData, setScheduleData] =
    useState<getHospitalScheduleAndDetailListType>([]);

  //页面一加载就请求科室的数据
  useEffect(() => {
    const getHospitalDepartmentList = async () => {
      const result = await getHospitalDepartmentRequest(hoscode as string);
      // console.log(result);
      sethosDepart(result);
    };
    getHospitalDepartmentList();
  }, []);

  //页面一加载就请求科室排班规则的数据   
  useEffect(() => {
    const getHospitalScheduleList = async () => {
      const result = await getHospitalScheduleRuleRequest({
        page: page,
        limit: limit,
        hoscode: hoscode as string,
        depcode: depCode,
      });
      // console.log(result.bookingScheduleList);
      setScheduleRule(result.bookingScheduleList);
      setTotal(result.total);
      setWorkDate(result.bookingScheduleList[0].workDate);
    };
    getHospitalScheduleList();
  }, [page, limit,depCode]);

  //页面一加载就请求科室排班详情的数据
  useEffect(() => {
    const getHospitalScheduleDetailList = async () => {
      const result = await getHospitalScheduleAndDetailRequest({
        hoscode: hoscode as string,
        depcode: depCode,
        workDate: workDate,
      });
      // console.log(result);
      setScheduleData(result);
    };
    getHospitalScheduleDetailList();
  }, [workDate]);

  //翻页的回调函数
  const changePageHandle = (page: number, limit: number) => {
    setPage(page);
    setLimit(limit);
  };

  //点击返回上一页
  const goBackLastHandle = ()=>{
    navigator(-1)
  }

  //点击科室树节点事件  getHospitalScheduleList
  const departmentSelectHandle = (depCodeArr:Key[]) =>{
    // console.log(depCodeArr[0]);    
    setDepCode(depCodeArr[0] as string)
  }

  //点击日期节点事件
  const changeDateSelectHandle =(workDate:string)=>{
    return ()=>{
      // console.log(workDate);      
      setWorkDate(workDate)
    }
  }

  //table 表格数据
  const columns = [
    {
      title: "序号",
      dataIndex: "index",
      render(_: any, __: any, index: any) {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "可预约数",
      dataIndex: "availableNumber",
    },
    {
      title: "剩余预约",
      dataIndex: "reservedNumber",
    },
    {
      title: "挂号费(元)",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];

  return (
    <div>
      <Card>
        <p>医院/科室/日期</p>
        <Row>
          <Col span={5}>
            <div className={style.treeStyle}>
              <Tree
                treeData={hosDepart as []}
                fieldNames={{ title: "depname", key: "depcode" }}
                expandedKeys={["a4e171f4cf9b6816acdfb9ae62c414d7"]}
                onSelect={departmentSelectHandle}
              />
            </div>
          </Col>

          <Col span={19}>
            {
              <div className={style.tagStyle}>
                {scheduleRule.map((item) => (
                  <Tag key={item.workDate} onClick={changeDateSelectHandle(item.workDate)} className={style.TagsStyle}>
                    {item.workDate} {item.dayOfWeek}
                    <br />
                    {item.availableNumber}/{item.reservedNumber}
                  </Tag>
                ))}
              </div>
            }
            <Pagination
              // 当前页数
              current={page}
              // 每页条数
              pageSize={limit}
              // 数据总数
              total={total}
              // 点击翻页的回调
              onChange={changePageHandle}
            />

            <Table
              className={style.tableStyle}
              columns={columns}
              dataSource={scheduleData}
              pagination={false}
              rowKey={"id"}
            />

            <Button onClick={goBackLastHandle} className={style.btnStyle}>返回</Button>
          </Col>
        </Row>
      </Card>
    </div>
  );
}
